<template>
  <div>
    <h2>常见问题</h2>
    <div v-for="(question, index) in faqs" :key="index">
      <h3 @click="toggleAnswer(index)">{{ question.title }}</h3>
      <p v-if="question.show">{{ question.answer }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      faqs: [
        {
          title: '如何发布商品？',
          answer: '要发布商品，请登录您的帐户，然后转至发布页面。在那里，您可以填写商品的详细信息并上传照片。',
          show: true
        },
        {
          title: '如何与买家联系？',
          answer: '在您的商品页面上，买家可以通过点击“联系卖家”按钮与您取得联系。',
          show: true
        },
        {
          title: '如何支付？',
          answer: '我们支持多种支付方式，包括信用卡、PayPal等。在购买商品时，您可以选择最适合您的支付方式。',
          show: true
        },
		{title: '害怕买家或卖家可能试图通过虚假信息或欺骗手段进行交易？',
		answer: '本软件提供身份验证功能、用户评价与评分系统、交易保障计划、监控与举报机制等来减少诈骗风险。',
		show: true},
		{title: '当买家与卖家之间可能出现物品描述不符、交付延迟等问题导致的纠纷？',
		answer: '本软件提供建立客服支持团队，提供交易纠纷解决渠道，或者通过第三方调解机构来解决争议。',
		show: true},
		{title: '买家担心所购物品的质量、真实性或者是否与描述相符？',
		answer: '鼓励卖家提供详细的商品描述与照片，并提供退货保障以确保商品质量与描述相符。',
		show: true}
        // 添加更多常见问题
      ]
    };
  },
  methods: {
    toggleAnswer(index) {
      this.faqs[index].show = !this.faqs[index].show;
    }
  }
};
</script>

<style scoped>
h2 {
  font-size: 24px;
  margin-bottom: 20px;
  
}

h3 {
  cursor: pointer;
  font-size: 18px;
  margin-bottom: 10px;
  
}

p {
  font-size: 16px;
  background-color: #f9ffff;
}
</style>